<!doctype html>

<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>vmlgraphics.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>

<div class="clear"></div>

<h2><a href="local_closure_goog_graphics_vmlgraphics.js.html">vmlgraphics.js</a></h2>

<pre class="prettyprint lang-js">
<a name="line1"></a>// Copyright 2007 The Closure Library Authors. All Rights Reserved.
<a name="line2"></a>//
<a name="line3"></a>// Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
<a name="line4"></a>// you may not use this file except in compliance with the License.
<a name="line5"></a>// You may obtain a copy of the License at
<a name="line6"></a>//
<a name="line7"></a>//      http://www.apache.org/licenses/LICENSE-2.0
<a name="line8"></a>//
<a name="line9"></a>// Unless required by applicable law or agreed to in writing, software
<a name="line10"></a>// distributed under the License is distributed on an &quot;AS-IS&quot; BASIS,
<a name="line11"></a>// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
<a name="line12"></a>// See the License for the specific language governing permissions and
<a name="line13"></a>// limitations under the License.
<a name="line14"></a>
<a name="line15"></a>
<a name="line16"></a>/**
<a name="line17"></a> * @fileoverview VmlGraphics sub class that uses VML to draw the graphics.
<a name="line18"></a> * @author arv@google.com (Erik Arvidsson)
<a name="line19"></a> */
<a name="line20"></a>
<a name="line21"></a>
<a name="line22"></a>goog.provide(&#39;goog.graphics.VmlGraphics&#39;);
<a name="line23"></a>
<a name="line24"></a>
<a name="line25"></a>goog.require(&#39;goog.array&#39;);
<a name="line26"></a>goog.require(&#39;goog.events&#39;);
<a name="line27"></a>goog.require(&#39;goog.events.EventHandler&#39;);
<a name="line28"></a>goog.require(&#39;goog.events.EventType&#39;);
<a name="line29"></a>goog.require(&#39;goog.graphics.AbstractGraphics&#39;);
<a name="line30"></a>goog.require(&#39;goog.graphics.LinearGradient&#39;);
<a name="line31"></a>goog.require(&#39;goog.graphics.Path&#39;);
<a name="line32"></a>goog.require(&#39;goog.graphics.SolidFill&#39;);
<a name="line33"></a>goog.require(&#39;goog.graphics.VmlEllipseElement&#39;);
<a name="line34"></a>goog.require(&#39;goog.graphics.VmlGroupElement&#39;);
<a name="line35"></a>goog.require(&#39;goog.graphics.VmlImageElement&#39;);
<a name="line36"></a>goog.require(&#39;goog.graphics.VmlPathElement&#39;);
<a name="line37"></a>goog.require(&#39;goog.graphics.VmlRectElement&#39;);
<a name="line38"></a>goog.require(&#39;goog.graphics.VmlTextElement&#39;);
<a name="line39"></a>goog.require(&#39;goog.math&#39;);
<a name="line40"></a>goog.require(&#39;goog.math.Size&#39;);
<a name="line41"></a>goog.require(&#39;goog.string&#39;);
<a name="line42"></a>goog.require(&#39;goog.style&#39;);
<a name="line43"></a>
<a name="line44"></a>
<a name="line45"></a>
<a name="line46"></a>/**
<a name="line47"></a> * A Graphics implementation for drawing using VML.
<a name="line48"></a> * @param {string|number} width The (non-zero) width in pixels.  Strings
<a name="line49"></a> *     expressing percentages of parent with (e.g. &#39;80%&#39;) are also accepted.
<a name="line50"></a> * @param {string|number} height The (non-zero) height in pixels.  Strings
<a name="line51"></a> *     expressing percentages of parent with (e.g. &#39;80%&#39;) are also accepted.
<a name="line52"></a> * @param {?number=} opt_coordWidth The coordinate width - if
<a name="line53"></a> *     omitted or null, defaults to same as width.
<a name="line54"></a> * @param {?number=} opt_coordHeight The coordinate height - if
<a name="line55"></a> *     omitted or null, defaults to same as height.
<a name="line56"></a> * @param {goog.dom.DomHelper=} opt_domHelper The DOM helper object for the
<a name="line57"></a> *     document we want to render in.
<a name="line58"></a> * @constructor
<a name="line59"></a> * @extends {goog.graphics.AbstractGraphics}
<a name="line60"></a> * @deprecated goog.graphics is deprecated. It existed to abstract over browser
<a name="line61"></a> *     differences before the canvas tag was widely supported.  See
<a name="line62"></a> *     http://en.wikipedia.org/wiki/Canvas_element for details.
<a name="line63"></a> * @final
<a name="line64"></a> */
<a name="line65"></a>goog.graphics.VmlGraphics = function(width, height,
<a name="line66"></a>                                     opt_coordWidth, opt_coordHeight,
<a name="line67"></a>                                     opt_domHelper) {
<a name="line68"></a>  goog.graphics.AbstractGraphics.call(this, width, height,
<a name="line69"></a>                                      opt_coordWidth, opt_coordHeight,
<a name="line70"></a>                                      opt_domHelper);
<a name="line71"></a>  this.handler_ = new goog.events.EventHandler(this);
<a name="line72"></a>};
<a name="line73"></a>goog.inherits(goog.graphics.VmlGraphics, goog.graphics.AbstractGraphics);
<a name="line74"></a>
<a name="line75"></a>
<a name="line76"></a>/**
<a name="line77"></a> * The prefix to use for VML elements
<a name="line78"></a> * @private
<a name="line79"></a> * @type {string}
<a name="line80"></a> */
<a name="line81"></a>goog.graphics.VmlGraphics.VML_PREFIX_ = &#39;g_vml_&#39;;
<a name="line82"></a>
<a name="line83"></a>
<a name="line84"></a>/**
<a name="line85"></a> * The VML namespace URN
<a name="line86"></a> * @private
<a name="line87"></a> * @type {string}
<a name="line88"></a> */
<a name="line89"></a>goog.graphics.VmlGraphics.VML_NS_ = &#39;urn:schemas-microsoft-com:vml&#39;;
<a name="line90"></a>
<a name="line91"></a>
<a name="line92"></a>/**
<a name="line93"></a> * The VML behavior URL.
<a name="line94"></a> * @private
<a name="line95"></a> * @type {string}
<a name="line96"></a> */
<a name="line97"></a>goog.graphics.VmlGraphics.VML_IMPORT_ = &#39;#default#VML&#39;;
<a name="line98"></a>
<a name="line99"></a>
<a name="line100"></a>/**
<a name="line101"></a> * Whether the document is using IE8 standards mode, and therefore needs hacks.
<a name="line102"></a> * @private
<a name="line103"></a> * @type {boolean}
<a name="line104"></a> */
<a name="line105"></a>goog.graphics.VmlGraphics.IE8_MODE_ = document.documentMode &amp;&amp;
<a name="line106"></a>    document.documentMode &gt;= 8;
<a name="line107"></a>
<a name="line108"></a>
<a name="line109"></a>/**
<a name="line110"></a> * The coordinate multiplier to allow sub-pixel rendering
<a name="line111"></a> * @type {number}
<a name="line112"></a> */
<a name="line113"></a>goog.graphics.VmlGraphics.COORD_MULTIPLIER = 100;
<a name="line114"></a>
<a name="line115"></a>
<a name="line116"></a>/**
<a name="line117"></a> * Converts the given size to a css size.  If it is a percentage, leaves it
<a name="line118"></a> * alone.  Otherwise assumes px.
<a name="line119"></a> *
<a name="line120"></a> * @param {number|string} size The size to use.
<a name="line121"></a> * @return {string} The position adjusted for COORD_MULTIPLIER.
<a name="line122"></a> */
<a name="line123"></a>goog.graphics.VmlGraphics.toCssSize = function(size) {
<a name="line124"></a>  return goog.isString(size) &amp;&amp; goog.string.endsWith(size, &#39;%&#39;) ?
<a name="line125"></a>         size : parseFloat(size.toString()) + &#39;px&#39;;
<a name="line126"></a>};
<a name="line127"></a>
<a name="line128"></a>
<a name="line129"></a>/**
<a name="line130"></a> * Multiplies positioning coordinates by COORD_MULTIPLIER to allow sub-pixel
<a name="line131"></a> * coordinates.  Also adds a half pixel offset to match SVG.
<a name="line132"></a> *
<a name="line133"></a> * This function is internal for the VML supporting classes, and
<a name="line134"></a> * should not be used externally.
<a name="line135"></a> *
<a name="line136"></a> * @param {number|string} number A position in pixels.
<a name="line137"></a> * @return {number} The position adjusted for COORD_MULTIPLIER.
<a name="line138"></a> */
<a name="line139"></a>goog.graphics.VmlGraphics.toPosCoord = function(number) {
<a name="line140"></a>  return Math.round((parseFloat(number.toString()) - 0.5) *
<a name="line141"></a>      goog.graphics.VmlGraphics.COORD_MULTIPLIER);
<a name="line142"></a>};
<a name="line143"></a>
<a name="line144"></a>
<a name="line145"></a>/**
<a name="line146"></a> * Add a &quot;px&quot; suffix to a number of pixels, and multiplies all coordinates by
<a name="line147"></a> * COORD_MULTIPLIER to allow sub-pixel coordinates.
<a name="line148"></a> *
<a name="line149"></a> * This function is internal for the VML supporting classes, and
<a name="line150"></a> * should not be used externally.
<a name="line151"></a> *
<a name="line152"></a> * @param {number|string} number A position in pixels.
<a name="line153"></a> * @return {string} The position with suffix &#39;px&#39;.
<a name="line154"></a> */
<a name="line155"></a>goog.graphics.VmlGraphics.toPosPx = function(number) {
<a name="line156"></a>  return goog.graphics.VmlGraphics.toPosCoord(number) + &#39;px&#39;;
<a name="line157"></a>};
<a name="line158"></a>
<a name="line159"></a>
<a name="line160"></a>/**
<a name="line161"></a> * Multiplies the width or height coordinate by COORD_MULTIPLIER to allow
<a name="line162"></a> * sub-pixel coordinates.
<a name="line163"></a> *
<a name="line164"></a> * This function is internal for the VML supporting classes, and
<a name="line165"></a> * should not be used externally.
<a name="line166"></a> *
<a name="line167"></a> * @param {string|number} number A size in units.
<a name="line168"></a> * @return {number} The size multiplied by the correct factor.
<a name="line169"></a> */
<a name="line170"></a>goog.graphics.VmlGraphics.toSizeCoord = function(number) {
<a name="line171"></a>  return Math.round(parseFloat(number.toString()) *
<a name="line172"></a>      goog.graphics.VmlGraphics.COORD_MULTIPLIER);
<a name="line173"></a>};
<a name="line174"></a>
<a name="line175"></a>
<a name="line176"></a>/**
<a name="line177"></a> * Add a &quot;px&quot; suffix to a number of pixels, and multiplies all coordinates by
<a name="line178"></a> * COORD_MULTIPLIER to allow sub-pixel coordinates.
<a name="line179"></a> *
<a name="line180"></a> * This function is internal for the VML supporting classes, and
<a name="line181"></a> * should not be used externally.
<a name="line182"></a> *
<a name="line183"></a> * @param {number|string} number A size in pixels.
<a name="line184"></a> * @return {string} The size with suffix &#39;px&#39;.
<a name="line185"></a> */
<a name="line186"></a>goog.graphics.VmlGraphics.toSizePx = function(number) {
<a name="line187"></a>  return goog.graphics.VmlGraphics.toSizeCoord(number) + &#39;px&#39;;
<a name="line188"></a>};
<a name="line189"></a>
<a name="line190"></a>
<a name="line191"></a>/**
<a name="line192"></a> * Sets an attribute on the given VML element, in the way best suited to the
<a name="line193"></a> * current version of IE.  Should only be used in the goog.graphics package.
<a name="line194"></a> * @param {Element} element The element to set an attribute
<a name="line195"></a> *     on.
<a name="line196"></a> * @param {string} name The name of the attribute to set.
<a name="line197"></a> * @param {string} value The value to set it to.
<a name="line198"></a> */
<a name="line199"></a>goog.graphics.VmlGraphics.setAttribute = function(element, name, value) {
<a name="line200"></a>  if (goog.graphics.VmlGraphics.IE8_MODE_) {
<a name="line201"></a>    element[name] = value;
<a name="line202"></a>  } else {
<a name="line203"></a>    element.setAttribute(name, value);
<a name="line204"></a>  }
<a name="line205"></a>};
<a name="line206"></a>
<a name="line207"></a>
<a name="line208"></a>/**
<a name="line209"></a> * Event handler.
<a name="line210"></a> * @type {goog.events.EventHandler}
<a name="line211"></a> * @private
<a name="line212"></a> */
<a name="line213"></a>goog.graphics.VmlGraphics.prototype.handler_;
<a name="line214"></a>
<a name="line215"></a>
<a name="line216"></a>/**
<a name="line217"></a> * Creates a VML element. Used internally and by different VML classes.
<a name="line218"></a> * @param {string} tagName The type of element to create.
<a name="line219"></a> * @return {!Element} The created element.
<a name="line220"></a> */
<a name="line221"></a>goog.graphics.VmlGraphics.prototype.createVmlElement = function(tagName) {
<a name="line222"></a>  var element =
<a name="line223"></a>      this.dom_.createElement(goog.graphics.VmlGraphics.VML_PREFIX_ + &#39;:&#39; +
<a name="line224"></a>                              tagName);
<a name="line225"></a>  element.id = goog.string.createUniqueString();
<a name="line226"></a>  return element;
<a name="line227"></a>};
<a name="line228"></a>
<a name="line229"></a>
<a name="line230"></a>/**
<a name="line231"></a> * Returns the VML element with the given id that is a child of this graphics
<a name="line232"></a> * object.
<a name="line233"></a> * Should be considered package private, and not used externally.
<a name="line234"></a> * @param {string} id The element id to find.
<a name="line235"></a> * @return {Element} The element with the given id, or null if none is found.
<a name="line236"></a> */
<a name="line237"></a>goog.graphics.VmlGraphics.prototype.getVmlElement = function(id) {
<a name="line238"></a>  return this.dom_.getElement(id);
<a name="line239"></a>};
<a name="line240"></a>
<a name="line241"></a>
<a name="line242"></a>/**
<a name="line243"></a> * Resets the graphics so they will display properly on IE8.  Noop in older
<a name="line244"></a> * versions.
<a name="line245"></a> * @private
<a name="line246"></a> */
<a name="line247"></a>goog.graphics.VmlGraphics.prototype.updateGraphics_ = function() {
<a name="line248"></a>  if (goog.graphics.VmlGraphics.IE8_MODE_ &amp;&amp; this.isInDocument()) {
<a name="line249"></a>    this.getElement().innerHTML = this.getElement().innerHTML;
<a name="line250"></a>  }
<a name="line251"></a>};
<a name="line252"></a>
<a name="line253"></a>
<a name="line254"></a>/**
<a name="line255"></a> * Appends an element.
<a name="line256"></a> *
<a name="line257"></a> * @param {goog.graphics.Element} element The element wrapper.
<a name="line258"></a> * @param {goog.graphics.GroupElement=} opt_group The group wrapper element
<a name="line259"></a> *     to append to. If not specified, appends to the main canvas.
<a name="line260"></a> * @private
<a name="line261"></a> */
<a name="line262"></a>goog.graphics.VmlGraphics.prototype.append_ = function(element, opt_group) {
<a name="line263"></a>  var parent = opt_group || this.canvasElement;
<a name="line264"></a>  parent.getElement().appendChild(element.getElement());
<a name="line265"></a>  this.updateGraphics_();
<a name="line266"></a>};
<a name="line267"></a>
<a name="line268"></a>
<a name="line269"></a>/**
<a name="line270"></a> * Sets the fill for the given element.
<a name="line271"></a> * @param {goog.graphics.StrokeAndFillElement} element The element wrapper.
<a name="line272"></a> * @param {goog.graphics.Fill?} fill The fill object.
<a name="line273"></a> * @override
<a name="line274"></a> */
<a name="line275"></a>goog.graphics.VmlGraphics.prototype.setElementFill = function(element, fill) {
<a name="line276"></a>  var vmlElement = element.getElement();
<a name="line277"></a>  this.removeFill(vmlElement);
<a name="line278"></a>  if (fill instanceof goog.graphics.SolidFill) {
<a name="line279"></a>    // NOTE(arv): VML does not understand &#39;transparent&#39; so hard code support
<a name="line280"></a>    // for it.
<a name="line281"></a>    if (fill.getColor() == &#39;transparent&#39;) {
<a name="line282"></a>      vmlElement.filled = false;
<a name="line283"></a>    } else if (fill.getOpacity() != 1) {
<a name="line284"></a>      vmlElement.filled = true;
<a name="line285"></a>      // Set opacity (number 0-1 is translated to percent)
<a name="line286"></a>      var fillNode = this.createVmlElement(&#39;fill&#39;);
<a name="line287"></a>      fillNode.opacity = Math.round(fill.getOpacity() * 100) + &#39;%&#39;;
<a name="line288"></a>      fillNode.color = fill.getColor();
<a name="line289"></a>      vmlElement.appendChild(fillNode);
<a name="line290"></a>    } else {
<a name="line291"></a>      vmlElement.filled = true;
<a name="line292"></a>      vmlElement.fillcolor = fill.getColor();
<a name="line293"></a>    }
<a name="line294"></a>  } else if (fill instanceof goog.graphics.LinearGradient) {
<a name="line295"></a>    vmlElement.filled = true;
<a name="line296"></a>    // Add a &#39;fill&#39; element
<a name="line297"></a>    var gradient = this.createVmlElement(&#39;fill&#39;);
<a name="line298"></a>    gradient.color = fill.getColor1();
<a name="line299"></a>    gradient.color2 = fill.getColor2();
<a name="line300"></a>    if (goog.isNumber(fill.getOpacity1())) {
<a name="line301"></a>      gradient.opacity = fill.getOpacity1();
<a name="line302"></a>    }
<a name="line303"></a>    if (goog.isNumber(fill.getOpacity2())) {
<a name="line304"></a>      gradient.opacity2 = fill.getOpacity2();
<a name="line305"></a>    }
<a name="line306"></a>    var angle = goog.math.angle(fill.getX1(), fill.getY1(),
<a name="line307"></a>        fill.getX2(), fill.getY2());
<a name="line308"></a>    // Our angles start from 0 to the right, and grow clockwise.
<a name="line309"></a>    // MSIE starts from 0 to top, and grows anti-clockwise.
<a name="line310"></a>    angle = Math.round(goog.math.standardAngle(270 - angle));
<a name="line311"></a>    gradient.angle = angle;
<a name="line312"></a>    gradient.type = &#39;gradient&#39;;
<a name="line313"></a>    vmlElement.appendChild(gradient);
<a name="line314"></a>  } else {
<a name="line315"></a>    vmlElement.filled = false;
<a name="line316"></a>  }
<a name="line317"></a>  this.updateGraphics_();
<a name="line318"></a>};
<a name="line319"></a>
<a name="line320"></a>
<a name="line321"></a>/**
<a name="line322"></a> * Sets the stroke for the given element.
<a name="line323"></a> * @param {goog.graphics.StrokeAndFillElement} element The element wrapper.
<a name="line324"></a> * @param {goog.graphics.Stroke?} stroke The stroke object.
<a name="line325"></a> * @override
<a name="line326"></a> */
<a name="line327"></a>goog.graphics.VmlGraphics.prototype.setElementStroke = function(element,
<a name="line328"></a>    stroke) {
<a name="line329"></a>  var vmlElement = element.getElement();
<a name="line330"></a>  if (stroke) {
<a name="line331"></a>    vmlElement.stroked = true;
<a name="line332"></a>
<a name="line333"></a>    var width = stroke.getWidth();
<a name="line334"></a>    if (goog.isString(width) &amp;&amp; width.indexOf(&#39;px&#39;) == -1) {
<a name="line335"></a>      width = parseFloat(width);
<a name="line336"></a>    } else {
<a name="line337"></a>      width = width * this.getPixelScaleX();
<a name="line338"></a>    }
<a name="line339"></a>
<a name="line340"></a>    var strokeElement = vmlElement.getElementsByTagName(&#39;stroke&#39;)[0];
<a name="line341"></a>    if (width &lt; 1) {
<a name="line342"></a>      strokeElement = strokeElement || this.createVmlElement(&#39;stroke&#39;);
<a name="line343"></a>      strokeElement.opacity = width;
<a name="line344"></a>      strokeElement.weight = &#39;1px&#39;;
<a name="line345"></a>      strokeElement.color = stroke.getColor();
<a name="line346"></a>      vmlElement.appendChild(strokeElement);
<a name="line347"></a>    } else {
<a name="line348"></a>      if (strokeElement) {
<a name="line349"></a>        vmlElement.removeChild(strokeElement);
<a name="line350"></a>      }
<a name="line351"></a>      vmlElement.strokecolor = stroke.getColor();
<a name="line352"></a>      vmlElement.strokeweight = width + &#39;px&#39;;
<a name="line353"></a>    }
<a name="line354"></a>  } else {
<a name="line355"></a>    vmlElement.stroked = false;
<a name="line356"></a>  }
<a name="line357"></a>  this.updateGraphics_();
<a name="line358"></a>};
<a name="line359"></a>
<a name="line360"></a>
<a name="line361"></a>/**
<a name="line362"></a> * Set the transformation of an element.
<a name="line363"></a> * @param {goog.graphics.Element} element The element wrapper.
<a name="line364"></a> * @param {number} x The x coordinate of the translation transform.
<a name="line365"></a> * @param {number} y The y coordinate of the translation transform.
<a name="line366"></a> * @param {number} angle The angle of the rotation transform.
<a name="line367"></a> * @param {number} centerX The horizontal center of the rotation transform.
<a name="line368"></a> * @param {number} centerY The vertical center of the rotation transform.
<a name="line369"></a> * @override
<a name="line370"></a> */
<a name="line371"></a>goog.graphics.VmlGraphics.prototype.setElementTransform = function(element, x,
<a name="line372"></a>    y, angle, centerX, centerY) {
<a name="line373"></a>  var el = element.getElement();
<a name="line374"></a>
<a name="line375"></a>  el.style.left = goog.graphics.VmlGraphics.toPosPx(x);
<a name="line376"></a>  el.style.top = goog.graphics.VmlGraphics.toPosPx(y);
<a name="line377"></a>  if (angle || el.rotation) {
<a name="line378"></a>    el.rotation = angle;
<a name="line379"></a>    el.coordsize = goog.graphics.VmlGraphics.toSizeCoord(centerX * 2) + &#39; &#39; +
<a name="line380"></a>        goog.graphics.VmlGraphics.toSizeCoord(centerY * 2);
<a name="line381"></a>  }
<a name="line382"></a>};
<a name="line383"></a>
<a name="line384"></a>
<a name="line385"></a>/**
<a name="line386"></a> * Removes the fill information from a dom element.
<a name="line387"></a> * @param {Element} element DOM element.
<a name="line388"></a> */
<a name="line389"></a>goog.graphics.VmlGraphics.prototype.removeFill = function(element) {
<a name="line390"></a>  element.fillcolor = &#39;&#39;;
<a name="line391"></a>  var v = element.childNodes.length;
<a name="line392"></a>  for (var i = 0; i &lt; element.childNodes.length; i++) {
<a name="line393"></a>    var child = element.childNodes[i];
<a name="line394"></a>    if (child.tagName == &#39;fill&#39;) {
<a name="line395"></a>      element.removeChild(child);
<a name="line396"></a>    }
<a name="line397"></a>  }
<a name="line398"></a>};
<a name="line399"></a>
<a name="line400"></a>
<a name="line401"></a>/**
<a name="line402"></a> * Set top, left, width and height for an element.
<a name="line403"></a> * This function is internal for the VML supporting classes, and
<a name="line404"></a> * should not be used externally.
<a name="line405"></a> *
<a name="line406"></a> * @param {Element} element DOM element.
<a name="line407"></a> * @param {number} left Left ccordinate in pixels.
<a name="line408"></a> * @param {number} top Top ccordinate in pixels.
<a name="line409"></a> * @param {number} width Width in pixels.
<a name="line410"></a> * @param {number} height Height in pixels.
<a name="line411"></a> */
<a name="line412"></a>goog.graphics.VmlGraphics.setPositionAndSize = function(
<a name="line413"></a>    element, left, top, width, height) {
<a name="line414"></a>  var style = element.style;
<a name="line415"></a>  style.position = &#39;absolute&#39;;
<a name="line416"></a>  style.left = goog.graphics.VmlGraphics.toPosPx(left);
<a name="line417"></a>  style.top = goog.graphics.VmlGraphics.toPosPx(top);
<a name="line418"></a>  style.width = goog.graphics.VmlGraphics.toSizePx(width);
<a name="line419"></a>  style.height = goog.graphics.VmlGraphics.toSizePx(height);
<a name="line420"></a>
<a name="line421"></a>  if (element.tagName == &#39;shape&#39;) {
<a name="line422"></a>    element.coordsize = goog.graphics.VmlGraphics.toSizeCoord(width) + &#39; &#39; +
<a name="line423"></a>                        goog.graphics.VmlGraphics.toSizeCoord(height);
<a name="line424"></a>  }
<a name="line425"></a>};
<a name="line426"></a>
<a name="line427"></a>
<a name="line428"></a>/**
<a name="line429"></a> * Creates an element spanning the surface.
<a name="line430"></a> *
<a name="line431"></a> * @param {string} type The type of element to create.
<a name="line432"></a> * @return {Element} The created, positioned, and sized element.
<a name="line433"></a> * @private
<a name="line434"></a> */
<a name="line435"></a>goog.graphics.VmlGraphics.prototype.createFullSizeElement_ = function(type) {
<a name="line436"></a>  var element = this.createVmlElement(type);
<a name="line437"></a>  var size = this.getCoordSize();
<a name="line438"></a>  goog.graphics.VmlGraphics.setPositionAndSize(element, 0, 0, size.width,
<a name="line439"></a>      size.height);
<a name="line440"></a>  return element;
<a name="line441"></a>};
<a name="line442"></a>
<a name="line443"></a>
<a name="line444"></a>/**
<a name="line445"></a> * IE magic - if this &quot;no-op&quot; line is not here, the if statement below will
<a name="line446"></a> * fail intermittently.  The eval is used to prevent the JsCompiler from
<a name="line447"></a> * stripping this piece of code, which it quite reasonably thinks is doing
<a name="line448"></a> * nothing. Put it in try-catch block to prevent &quot;Unspecified Error&quot; when
<a name="line449"></a> * this statement is executed in a defer JS in IE.
<a name="line450"></a> * More info here:
<a name="line451"></a> * http://www.mail-archive.com/users@openlayers.org/msg01838.html
<a name="line452"></a> */
<a name="line453"></a>try {
<a name="line454"></a>  eval(&#39;document.namespaces&#39;);
<a name="line455"></a>} catch (ex) {}
<a name="line456"></a>
<a name="line457"></a>
<a name="line458"></a>/**
<a name="line459"></a> * Creates the DOM representation of the graphics area.
<a name="line460"></a> * @override
<a name="line461"></a> */
<a name="line462"></a>goog.graphics.VmlGraphics.prototype.createDom = function() {
<a name="line463"></a>  var doc = this.dom_.getDocument();
<a name="line464"></a>
<a name="line465"></a>  // Add the namespace.
<a name="line466"></a>  if (!doc.namespaces[goog.graphics.VmlGraphics.VML_PREFIX_]) {
<a name="line467"></a>    if (goog.graphics.VmlGraphics.IE8_MODE_) {
<a name="line468"></a>      doc.namespaces.add(goog.graphics.VmlGraphics.VML_PREFIX_,
<a name="line469"></a>                         goog.graphics.VmlGraphics.VML_NS_,
<a name="line470"></a>                         goog.graphics.VmlGraphics.VML_IMPORT_);
<a name="line471"></a>    } else {
<a name="line472"></a>      doc.namespaces.add(goog.graphics.VmlGraphics.VML_PREFIX_,
<a name="line473"></a>                         goog.graphics.VmlGraphics.VML_NS_);
<a name="line474"></a>    }
<a name="line475"></a>
<a name="line476"></a>    // We assume that we only need to add the CSS if the namespace was not
<a name="line477"></a>    // present
<a name="line478"></a>    var ss = doc.createStyleSheet();
<a name="line479"></a>    ss.cssText = goog.graphics.VmlGraphics.VML_PREFIX_ + &#39;\\:*&#39; +
<a name="line480"></a>                 &#39;{behavior:url(#default#VML)}&#39;;
<a name="line481"></a>  }
<a name="line482"></a>
<a name="line483"></a>  // Outer a DIV with overflow hidden for clipping.
<a name="line484"></a>  // All inner elements are absolutly positioned on-top of this div.
<a name="line485"></a>  var pixelWidth = this.width;
<a name="line486"></a>  var pixelHeight = this.height;
<a name="line487"></a>  var divElement = this.dom_.createDom(&#39;div&#39;, {
<a name="line488"></a>    &#39;style&#39;: &#39;overflow:hidden;position:relative;width:&#39; +
<a name="line489"></a>        goog.graphics.VmlGraphics.toCssSize(pixelWidth) + &#39;;height:&#39; +
<a name="line490"></a>        goog.graphics.VmlGraphics.toCssSize(pixelHeight)
<a name="line491"></a>  });
<a name="line492"></a>
<a name="line493"></a>  this.setElementInternal(divElement);
<a name="line494"></a>
<a name="line495"></a>  var group = this.createVmlElement(&#39;group&#39;);
<a name="line496"></a>  var style = group.style;
<a name="line497"></a>
<a name="line498"></a>  style.position = &#39;absolute&#39;;
<a name="line499"></a>  style.left = style.top = 0;
<a name="line500"></a>  style.width = this.width;
<a name="line501"></a>  style.height = this.height;
<a name="line502"></a>  if (this.coordWidth) {
<a name="line503"></a>    group.coordsize =
<a name="line504"></a>        goog.graphics.VmlGraphics.toSizeCoord(this.coordWidth) + &#39; &#39; +
<a name="line505"></a>        goog.graphics.VmlGraphics.toSizeCoord(
<a name="line506"></a>            /** @type {number} */ (this.coordHeight));
<a name="line507"></a>  } else {
<a name="line508"></a>    group.coordsize = goog.graphics.VmlGraphics.toSizeCoord(pixelWidth) + &#39; &#39; +
<a name="line509"></a>        goog.graphics.VmlGraphics.toSizeCoord(pixelHeight);
<a name="line510"></a>  }
<a name="line511"></a>
<a name="line512"></a>  if (goog.isDef(this.coordLeft)) {
<a name="line513"></a>    group.coordorigin = goog.graphics.VmlGraphics.toSizeCoord(this.coordLeft) +
<a name="line514"></a>        &#39; &#39; + goog.graphics.VmlGraphics.toSizeCoord(this.coordTop);
<a name="line515"></a>  } else {
<a name="line516"></a>    group.coordorigin = &#39;0 0&#39;;
<a name="line517"></a>  }
<a name="line518"></a>  divElement.appendChild(group);
<a name="line519"></a>
<a name="line520"></a>  this.canvasElement = new goog.graphics.VmlGroupElement(group, this);
<a name="line521"></a>
<a name="line522"></a>  goog.events.listen(divElement, goog.events.EventType.RESIZE, goog.bind(
<a name="line523"></a>      this.handleContainerResize_, this));
<a name="line524"></a>};
<a name="line525"></a>
<a name="line526"></a>
<a name="line527"></a>/**
<a name="line528"></a> * Changes the canvas element size to match the container element size.
<a name="line529"></a> * @private
<a name="line530"></a> */
<a name="line531"></a>goog.graphics.VmlGraphics.prototype.handleContainerResize_ = function() {
<a name="line532"></a>  var size = goog.style.getSize(this.getElement());
<a name="line533"></a>  var style = this.canvasElement.getElement().style;
<a name="line534"></a>
<a name="line535"></a>  if (size.width) {
<a name="line536"></a>    style.width = size.width + &#39;px&#39;;
<a name="line537"></a>    style.height = size.height + &#39;px&#39;;
<a name="line538"></a>  } else {
<a name="line539"></a>    var current = this.getElement();
<a name="line540"></a>    while (current &amp;&amp; current.currentStyle &amp;&amp;
<a name="line541"></a>        current.currentStyle.display != &#39;none&#39;) {
<a name="line542"></a>      current = current.parentNode;
<a name="line543"></a>    }
<a name="line544"></a>    if (current &amp;&amp; current.currentStyle) {
<a name="line545"></a>      this.handler_.listen(current, &#39;propertychange&#39;,
<a name="line546"></a>          this.handleContainerResize_);
<a name="line547"></a>    }
<a name="line548"></a>  }
<a name="line549"></a>
<a name="line550"></a>  this.dispatchEvent(goog.events.EventType.RESIZE);
<a name="line551"></a>};
<a name="line552"></a>
<a name="line553"></a>
<a name="line554"></a>/**
<a name="line555"></a> * Handle property changes on hidden ancestors.
<a name="line556"></a> * @param {goog.events.BrowserEvent} e The browser event.
<a name="line557"></a> * @private
<a name="line558"></a> */
<a name="line559"></a>goog.graphics.VmlGraphics.prototype.handlePropertyChange_ = function(e) {
<a name="line560"></a>  var prop = e.getBrowserEvent().propertyName;
<a name="line561"></a>  if (prop == &#39;display&#39; || prop == &#39;className&#39;) {
<a name="line562"></a>    this.handler_.unlisten(/** @type {Element} */(e.target),
<a name="line563"></a>        &#39;propertychange&#39;, this.handlePropertyChange_);
<a name="line564"></a>    this.handleContainerResize_();
<a name="line565"></a>  }
<a name="line566"></a>};
<a name="line567"></a>
<a name="line568"></a>
<a name="line569"></a>/**
<a name="line570"></a> * Changes the coordinate system position.
<a name="line571"></a> * @param {number} left The coordinate system left bound.
<a name="line572"></a> * @param {number} top The coordinate system top bound.
<a name="line573"></a> * @override
<a name="line574"></a> */
<a name="line575"></a>goog.graphics.VmlGraphics.prototype.setCoordOrigin = function(left, top) {
<a name="line576"></a>  this.coordLeft = left;
<a name="line577"></a>  this.coordTop = top;
<a name="line578"></a>
<a name="line579"></a>  this.canvasElement.getElement().coordorigin =
<a name="line580"></a>      goog.graphics.VmlGraphics.toSizeCoord(this.coordLeft) + &#39; &#39; +
<a name="line581"></a>      goog.graphics.VmlGraphics.toSizeCoord(this.coordTop);
<a name="line582"></a>};
<a name="line583"></a>
<a name="line584"></a>
<a name="line585"></a>/**
<a name="line586"></a> * Changes the coordinate size.
<a name="line587"></a> * @param {number} coordWidth The coordinate width.
<a name="line588"></a> * @param {number} coordHeight The coordinate height.
<a name="line589"></a> * @override
<a name="line590"></a> */
<a name="line591"></a>goog.graphics.VmlGraphics.prototype.setCoordSize = function(coordWidth,
<a name="line592"></a>                                                            coordHeight) {
<a name="line593"></a>  goog.graphics.VmlGraphics.superClass_.setCoordSize.apply(this, arguments);
<a name="line594"></a>
<a name="line595"></a>  this.canvasElement.getElement().coordsize =
<a name="line596"></a>      goog.graphics.VmlGraphics.toSizeCoord(coordWidth) + &#39; &#39; +
<a name="line597"></a>      goog.graphics.VmlGraphics.toSizeCoord(coordHeight);
<a name="line598"></a>};
<a name="line599"></a>
<a name="line600"></a>
<a name="line601"></a>/**
<a name="line602"></a> * Change the size of the canvas.
<a name="line603"></a> * @param {number} pixelWidth The width in pixels.
<a name="line604"></a> * @param {number} pixelHeight The height in pixels.
<a name="line605"></a> * @override
<a name="line606"></a> */
<a name="line607"></a>goog.graphics.VmlGraphics.prototype.setSize = function(pixelWidth,
<a name="line608"></a>    pixelHeight) {
<a name="line609"></a>  goog.style.setSize(this.getElement(), pixelWidth, pixelHeight);
<a name="line610"></a>};
<a name="line611"></a>
<a name="line612"></a>
<a name="line613"></a>/**
<a name="line614"></a> * @return {!goog.math.Size} Returns the number of pixels spanned by the
<a name="line615"></a> *     surface.
<a name="line616"></a> * @override
<a name="line617"></a> */
<a name="line618"></a>goog.graphics.VmlGraphics.prototype.getPixelSize = function() {
<a name="line619"></a>  var el = this.getElement();
<a name="line620"></a>  // The following relies on the fact that the size can never be 0.
<a name="line621"></a>  return new goog.math.Size(el.style.pixelWidth || el.offsetWidth || 1,
<a name="line622"></a>      el.style.pixelHeight || el.offsetHeight || 1);
<a name="line623"></a>};
<a name="line624"></a>
<a name="line625"></a>
<a name="line626"></a>/**
<a name="line627"></a> * Remove all drawing elements from the graphics.
<a name="line628"></a> * @override
<a name="line629"></a> */
<a name="line630"></a>goog.graphics.VmlGraphics.prototype.clear = function() {
<a name="line631"></a>  this.canvasElement.clear();
<a name="line632"></a>};
<a name="line633"></a>
<a name="line634"></a>
<a name="line635"></a>/**
<a name="line636"></a> * Draw an ellipse.
<a name="line637"></a> *
<a name="line638"></a> * @param {number} cx Center X coordinate.
<a name="line639"></a> * @param {number} cy Center Y coordinate.
<a name="line640"></a> * @param {number} rx Radius length for the x-axis.
<a name="line641"></a> * @param {number} ry Radius length for the y-axis.
<a name="line642"></a> * @param {goog.graphics.Stroke?} stroke Stroke object describing the
<a name="line643"></a> *    stroke.
<a name="line644"></a> * @param {goog.graphics.Fill?} fill Fill object describing the fill.
<a name="line645"></a> * @param {goog.graphics.GroupElement=} opt_group The group wrapper element
<a name="line646"></a> *     to append to. If not specified, appends to the main canvas.
<a name="line647"></a> *
<a name="line648"></a> * @return {!goog.graphics.EllipseElement} The newly created element.
<a name="line649"></a> * @override
<a name="line650"></a> */
<a name="line651"></a>goog.graphics.VmlGraphics.prototype.drawEllipse = function(cx, cy, rx, ry,
<a name="line652"></a>    stroke, fill, opt_group) {
<a name="line653"></a>  var element = this.createVmlElement(&#39;oval&#39;);
<a name="line654"></a>  goog.graphics.VmlGraphics.setPositionAndSize(element, cx - rx, cy - ry,
<a name="line655"></a>      rx * 2, ry * 2);
<a name="line656"></a>  var wrapper = new goog.graphics.VmlEllipseElement(element, this,
<a name="line657"></a>      cx, cy, rx, ry, stroke, fill);
<a name="line658"></a>  this.append_(wrapper, opt_group);
<a name="line659"></a>  return wrapper;
<a name="line660"></a>};
<a name="line661"></a>
<a name="line662"></a>
<a name="line663"></a>/**
<a name="line664"></a> * Draw a rectangle.
<a name="line665"></a> *
<a name="line666"></a> * @param {number} x X coordinate (left).
<a name="line667"></a> * @param {number} y Y coordinate (top).
<a name="line668"></a> * @param {number} width Width of rectangle.
<a name="line669"></a> * @param {number} height Height of rectangle.
<a name="line670"></a> * @param {goog.graphics.Stroke?} stroke Stroke object describing the
<a name="line671"></a> *    stroke.
<a name="line672"></a> * @param {goog.graphics.Fill?} fill Fill object describing the fill.
<a name="line673"></a> * @param {goog.graphics.GroupElement=} opt_group The group wrapper element
<a name="line674"></a> *     to append to. If not specified, appends to the main canvas.
<a name="line675"></a> *
<a name="line676"></a> * @return {!goog.graphics.RectElement} The newly created element.
<a name="line677"></a> * @override
<a name="line678"></a> */
<a name="line679"></a>goog.graphics.VmlGraphics.prototype.drawRect = function(x, y, width, height,
<a name="line680"></a>    stroke, fill, opt_group) {
<a name="line681"></a>  var element = this.createVmlElement(&#39;rect&#39;);
<a name="line682"></a>  goog.graphics.VmlGraphics.setPositionAndSize(element, x, y, width, height);
<a name="line683"></a>  var wrapper = new goog.graphics.VmlRectElement(element, this, stroke, fill);
<a name="line684"></a>  this.append_(wrapper, opt_group);
<a name="line685"></a>  return wrapper;
<a name="line686"></a>};
<a name="line687"></a>
<a name="line688"></a>
<a name="line689"></a>/**
<a name="line690"></a> * Draw an image.
<a name="line691"></a> *
<a name="line692"></a> * @param {number} x X coordinate (left).
<a name="line693"></a> * @param {number} y Y coordinate (top).
<a name="line694"></a> * @param {number} width Width of image.
<a name="line695"></a> * @param {number} height Height of image.
<a name="line696"></a> * @param {string} src Source of the image.
<a name="line697"></a> * @param {goog.graphics.GroupElement=} opt_group The group wrapper element
<a name="line698"></a> *     to append to. If not specified, appends to the main canvas.
<a name="line699"></a> *
<a name="line700"></a> * @return {!goog.graphics.ImageElement} The newly created element.
<a name="line701"></a> */
<a name="line702"></a>goog.graphics.VmlGraphics.prototype.drawImage = function(x, y, width, height,
<a name="line703"></a>    src, opt_group) {
<a name="line704"></a>  var element = this.createVmlElement(&#39;image&#39;);
<a name="line705"></a>  goog.graphics.VmlGraphics.setPositionAndSize(element, x, y, width, height);
<a name="line706"></a>  goog.graphics.VmlGraphics.setAttribute(element, &#39;src&#39;, src);
<a name="line707"></a>  var wrapper = new goog.graphics.VmlImageElement(element, this);
<a name="line708"></a>  this.append_(wrapper, opt_group);
<a name="line709"></a>  return wrapper;
<a name="line710"></a>};
<a name="line711"></a>
<a name="line712"></a>
<a name="line713"></a>/**
<a name="line714"></a> * Draw a text string vertically centered on a given line.
<a name="line715"></a> *
<a name="line716"></a> * @param {string} text The text to draw.
<a name="line717"></a> * @param {number} x1 X coordinate of start of line.
<a name="line718"></a> * @param {number} y1 Y coordinate of start of line.
<a name="line719"></a> * @param {number} x2 X coordinate of end of line.
<a name="line720"></a> * @param {number} y2 Y coordinate of end of line.
<a name="line721"></a> * @param {?string} align Horizontal alignment: left (default), center, right.
<a name="line722"></a> * @param {goog.graphics.Font} font Font describing the font properties.
<a name="line723"></a> * @param {goog.graphics.Stroke?} stroke Stroke object describing the stroke.
<a name="line724"></a> * @param {goog.graphics.Fill?} fill Fill object describing the fill.
<a name="line725"></a> * @param {goog.graphics.GroupElement=} opt_group The group wrapper element
<a name="line726"></a> *     to append to. If not specified, appends to the main canvas.
<a name="line727"></a> *
<a name="line728"></a> * @return {!goog.graphics.TextElement} The newly created element.
<a name="line729"></a> * @override
<a name="line730"></a> */
<a name="line731"></a>goog.graphics.VmlGraphics.prototype.drawTextOnLine = function(
<a name="line732"></a>    text, x1, y1, x2, y2, align, font, stroke, fill, opt_group) {
<a name="line733"></a>  var shape = this.createFullSizeElement_(&#39;shape&#39;);
<a name="line734"></a>
<a name="line735"></a>  var pathElement = this.createVmlElement(&#39;path&#39;);
<a name="line736"></a>  var path = &#39;M&#39; + goog.graphics.VmlGraphics.toPosCoord(x1) + &#39;,&#39; +
<a name="line737"></a>             goog.graphics.VmlGraphics.toPosCoord(y1) + &#39;L&#39; +
<a name="line738"></a>             goog.graphics.VmlGraphics.toPosCoord(x2) + &#39;,&#39; +
<a name="line739"></a>             goog.graphics.VmlGraphics.toPosCoord(y2) + &#39;E&#39;;
<a name="line740"></a>  goog.graphics.VmlGraphics.setAttribute(pathElement, &#39;v&#39;, path);
<a name="line741"></a>  goog.graphics.VmlGraphics.setAttribute(pathElement, &#39;textpathok&#39;, &#39;true&#39;);
<a name="line742"></a>
<a name="line743"></a>  var textPathElement = this.createVmlElement(&#39;textpath&#39;);
<a name="line744"></a>  textPathElement.setAttribute(&#39;on&#39;, &#39;true&#39;);
<a name="line745"></a>  var style = textPathElement.style;
<a name="line746"></a>  style.fontSize = font.size * this.getPixelScaleX();
<a name="line747"></a>  style.fontFamily = font.family;
<a name="line748"></a>  if (align != null) {
<a name="line749"></a>    style[&#39;v-text-align&#39;] = align;
<a name="line750"></a>  }
<a name="line751"></a>  if (font.bold) {
<a name="line752"></a>    style.fontWeight = &#39;bold&#39;;
<a name="line753"></a>  }
<a name="line754"></a>  if (font.italic) {
<a name="line755"></a>    style.fontStyle = &#39;italic&#39;;
<a name="line756"></a>  }
<a name="line757"></a>  goog.graphics.VmlGraphics.setAttribute(textPathElement, &#39;string&#39;, text);
<a name="line758"></a>
<a name="line759"></a>  shape.appendChild(pathElement);
<a name="line760"></a>  shape.appendChild(textPathElement);
<a name="line761"></a>  var wrapper = new goog.graphics.VmlTextElement(shape, this, stroke, fill);
<a name="line762"></a>  this.append_(wrapper, opt_group);
<a name="line763"></a>  return wrapper;
<a name="line764"></a>};
<a name="line765"></a>
<a name="line766"></a>
<a name="line767"></a>/**
<a name="line768"></a> * Draw a path.
<a name="line769"></a> *
<a name="line770"></a> * @param {!goog.graphics.Path} path The path object to draw.
<a name="line771"></a> * @param {goog.graphics.Stroke?} stroke Stroke object describing the stroke.
<a name="line772"></a> * @param {goog.graphics.Fill?} fill Fill object describing the fill.
<a name="line773"></a> * @param {goog.graphics.GroupElement=} opt_group The group wrapper element
<a name="line774"></a> *     to append to. If not specified, appends to the main canvas.
<a name="line775"></a> *
<a name="line776"></a> * @return {!goog.graphics.PathElement} The newly created element.
<a name="line777"></a> * @override
<a name="line778"></a> */
<a name="line779"></a>goog.graphics.VmlGraphics.prototype.drawPath = function(path, stroke, fill,
<a name="line780"></a>    opt_group) {
<a name="line781"></a>  var element = this.createFullSizeElement_(&#39;shape&#39;);
<a name="line782"></a>  goog.graphics.VmlGraphics.setAttribute(element, &#39;path&#39;,
<a name="line783"></a>      goog.graphics.VmlGraphics.getVmlPath(path));
<a name="line784"></a>
<a name="line785"></a>  var wrapper = new goog.graphics.VmlPathElement(element, this, stroke, fill);
<a name="line786"></a>  this.append_(wrapper, opt_group);
<a name="line787"></a>  return wrapper;
<a name="line788"></a>};
<a name="line789"></a>
<a name="line790"></a>
<a name="line791"></a>/**
<a name="line792"></a> * Returns a string representation of a logical path suitable for use in
<a name="line793"></a> * a VML element.
<a name="line794"></a> *
<a name="line795"></a> * @param {goog.graphics.Path} path The logical path.
<a name="line796"></a> * @return {string} The VML path representation.
<a name="line797"></a> * @suppress {deprecated} goog.graphics is deprecated.
<a name="line798"></a> */
<a name="line799"></a>goog.graphics.VmlGraphics.getVmlPath = function(path) {
<a name="line800"></a>  var list = [];
<a name="line801"></a>  path.forEachSegment(function(segment, args) {
<a name="line802"></a>    switch (segment) {
<a name="line803"></a>      case goog.graphics.Path.Segment.MOVETO:
<a name="line804"></a>        list.push(&#39;m&#39;);
<a name="line805"></a>        Array.prototype.push.apply(list, goog.array.map(args,
<a name="line806"></a>            goog.graphics.VmlGraphics.toSizeCoord));
<a name="line807"></a>        break;
<a name="line808"></a>      case goog.graphics.Path.Segment.LINETO:
<a name="line809"></a>        list.push(&#39;l&#39;);
<a name="line810"></a>        Array.prototype.push.apply(list, goog.array.map(args,
<a name="line811"></a>            goog.graphics.VmlGraphics.toSizeCoord));
<a name="line812"></a>        break;
<a name="line813"></a>      case goog.graphics.Path.Segment.CURVETO:
<a name="line814"></a>        list.push(&#39;c&#39;);
<a name="line815"></a>        Array.prototype.push.apply(list, goog.array.map(args,
<a name="line816"></a>            goog.graphics.VmlGraphics.toSizeCoord));
<a name="line817"></a>        break;
<a name="line818"></a>      case goog.graphics.Path.Segment.CLOSE:
<a name="line819"></a>        list.push(&#39;x&#39;);
<a name="line820"></a>        break;
<a name="line821"></a>      case goog.graphics.Path.Segment.ARCTO:
<a name="line822"></a>        var toAngle = args[2] + args[3];
<a name="line823"></a>        var cx = goog.graphics.VmlGraphics.toSizeCoord(
<a name="line824"></a>            args[4] - goog.math.angleDx(toAngle, args[0]));
<a name="line825"></a>        var cy = goog.graphics.VmlGraphics.toSizeCoord(
<a name="line826"></a>            args[5] - goog.math.angleDy(toAngle, args[1]));
<a name="line827"></a>        var rx = goog.graphics.VmlGraphics.toSizeCoord(args[0]);
<a name="line828"></a>        var ry = goog.graphics.VmlGraphics.toSizeCoord(args[1]);
<a name="line829"></a>        // VML angles are in fd units (see http://www.w3.org/TR/NOTE-VML) and
<a name="line830"></a>        // are positive counter-clockwise.
<a name="line831"></a>        var fromAngle = Math.round(args[2] * -65536);
<a name="line832"></a>        var extent = Math.round(args[3] * -65536);
<a name="line833"></a>        list.push(&#39;ae&#39;, cx, cy, rx, ry, fromAngle, extent);
<a name="line834"></a>        break;
<a name="line835"></a>    }
<a name="line836"></a>  });
<a name="line837"></a>  return list.join(&#39; &#39;);
<a name="line838"></a>};
<a name="line839"></a>
<a name="line840"></a>
<a name="line841"></a>/**
<a name="line842"></a> * Create an empty group of drawing elements.
<a name="line843"></a> *
<a name="line844"></a> * @param {goog.graphics.GroupElement=} opt_group The group wrapper element
<a name="line845"></a> *     to append to. If not specified, appends to the main canvas.
<a name="line846"></a> *
<a name="line847"></a> * @return {!goog.graphics.GroupElement} The newly created group.
<a name="line848"></a> * @override
<a name="line849"></a> */
<a name="line850"></a>goog.graphics.VmlGraphics.prototype.createGroup = function(opt_group) {
<a name="line851"></a>  var element = this.createFullSizeElement_(&#39;group&#39;);
<a name="line852"></a>  var parent = opt_group || this.canvasElement;
<a name="line853"></a>  parent.getElement().appendChild(element);
<a name="line854"></a>  return new goog.graphics.VmlGroupElement(element, this);
<a name="line855"></a>};
<a name="line856"></a>
<a name="line857"></a>
<a name="line858"></a>/**
<a name="line859"></a> * Measure and return the width (in pixels) of a given text string.
<a name="line860"></a> * Text measurement is needed to make sure a text can fit in the allocated
<a name="line861"></a> * area. The way text length is measured is by writing it into a div that is
<a name="line862"></a> * after the visible area, measure the div width, and immediatly erase the
<a name="line863"></a> * written value.
<a name="line864"></a> *
<a name="line865"></a> * @param {string} text The text string to measure.
<a name="line866"></a> * @param {goog.graphics.Font} font The font object describing the font style.
<a name="line867"></a> *
<a name="line868"></a> * @return {number} The width in pixels of the text strings.
<a name="line869"></a> * @override
<a name="line870"></a> */
<a name="line871"></a>goog.graphics.VmlGraphics.prototype.getTextWidth = function(text, font) {
<a name="line872"></a>  // TODO(arv): Implement
<a name="line873"></a>  return 0;
<a name="line874"></a>};
<a name="line875"></a>
<a name="line876"></a>
<a name="line877"></a>/** @override */
<a name="line878"></a>goog.graphics.VmlGraphics.prototype.enterDocument = function() {
<a name="line879"></a>  goog.graphics.VmlGraphics.superClass_.enterDocument.call(this);
<a name="line880"></a>  this.handleContainerResize_();
<a name="line881"></a>  this.updateGraphics_();
<a name="line882"></a>};
<a name="line883"></a>
<a name="line884"></a>
<a name="line885"></a>/**
<a name="line886"></a> * Disposes of the component by removing event handlers, detacing DOM nodes from
<a name="line887"></a> * the document body, and removing references to them.
<a name="line888"></a> * @override
<a name="line889"></a> * @protected
<a name="line890"></a> */
<a name="line891"></a>goog.graphics.VmlGraphics.prototype.disposeInternal = function() {
<a name="line892"></a>  this.canvasElement = null;
<a name="line893"></a>  goog.graphics.VmlGraphics.superClass_.disposeInternal.call(this);
<a name="line894"></a>};
</pre>


</body>
</html>
